<template>
	<view>

		<view class="head-wrapper">
			<view style="font-size: 26rpx;">数据来源说明：</view>
			<view style="font-size: 28rpx; font-weight: bold; margin-top: 16rpx;">章鱼小数据餐饮B端大数据库</view>
			<view class="tag-list">
				<view class="tag-item" v-for="(item, index) in tagList" :key="index">{{ item }}</view>
			</view>
			<view style="font-size: 28rpx; font-weight: bold; margin-top: 16rpx;">历时6年持续迭代，基于网络平台、收银和消费者大数据结构化整合构建
			</view>
		</view>

		<view class="tabbar-wrapper">
			<view class="tabbar-item" :class="{ 'active': activeIndex==index }" v-for="(item, index) in tabs"
				:key="index" @click="activeIndex=index">{{ item.name }}</view>
		</view>

		<view class="content-wrapper">
			<image :src="tabs[activeIndex].image" mode="widthFix"></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: ["120+城市", "300+品类", "4000+食材", "200万+门店", "300万+菜品", "198种风味", "167种烹饪手法"],
				tabs: [{
						name: '源数据(部分)',
						image: 'https://octopus-wxapp.oss-cn-hangzhou.aliyuncs.com/octopus/dataInfo_db.png'
					},
					{
						name: '分析函数',
						image: 'https://octopus-wxapp.oss-cn-hangzhou.aliyuncs.com/octopus/dataInfo_function.png'
					},
				],
				activeIndex: 0,
			};
		}
	}
</script>

<style>
	page {
		background-color: #F0F0F0;
	}
</style>
<style lang="scss" scoped>
	.head-wrapper {
		background-color: #FFDA2D;
		padding: 32rpx;
		color: #333;

		.tag-list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 8rpx;

			.tag-item {
				background-color: rgba(255, 255, 255, .8);
				padding: 8rpx 16rpx;
				margin-top: 8rpx;
				margin-right: 8rpx;
				font-size: 26rpx;
				font-weight: bold;
				border-radius: 8rpx;
			}
		}
	}

	.tabbar-wrapper {
		background-color: #fff;
		padding: 32rpx;
		display: flex;
		border-radius: 0 0 24rpx 24rpx;

		.tabbar-item {
			flex: 1;
			background-color: rgba(255, 218, 45, .2);
			color: #666;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			padding: 16rpx;
			border-radius: 8rpx;

			&+.tabbar-item {
				margin-left: 16rpx;
			}

			&.active {
				background-color: rgba(255, 218, 45, 1);
				color: #333;
			}
		}
	}

	.content-wrapper {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: 16rpx;
		overflow: hidden;

		image {
			width: 100%;
		}
	}
</style>
